<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="__PUBLIC__/Image/logo.ico">

    <title>义达生态旅游</title>

    <!-- Bootstrap core CSS -->
    <link href="__PUBLIC__/Css/lib/bootstrap.min.css" rel="stylesheet"  media="screen">
    <link href="__PUBLIC__/Css/lib/bootstrap-datetimepicker.min.css" rel="stylesheet"  media="screen">
    <link href="__PUBLIC__/Css/Index/common.css" rel="stylesheet" type="text/css">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    
    <style>
    img{
		width:100%;
    	height:100%;
    }
    
 	.nav-tabs{
		border-bottom:0;
    }
    
    .nav-tabs > li{
		height:30px;
    	font-size:18px;
    	border-radius:5px;
    	padding-top:0;
    	padding-bottom:0;
    	background-color:white;
    	color:#22AB39;
    	margin-right:10px;
    }
    
	.nav-tabs > li > a{
    	padding:0;
		color:#22AB39;
    }
    
	.carousel-inner ul li{
		width:23%;
		height:300px;
		text-align:left;
		vertical-align:top;
	}
	
	/*轮播图片*/
	.carousel-inner ul li img{
		width:100%;
		height:75%;
	}
	
	/*轮播控制按钮*/
	.carousel-control{
		width:80px;
	    padding-top: 3%;
	    font-size: 100px;
	    font-weight: bold;
	    color: #B5B6B1;
		opacity:1;
	}
	.carousel-control:hover{
		color: #B5B6B1;
		opacity:1;
	}
	
	.form-group{
		margin-bottom:0px;
	}
	
	.label-title,
	.label-info-other{
		color:#D0F9FC;
		font-size:25px;
		font-weight:100;
		padding-right: 0;
	}
	
	/*标题*/
	.label-title{
		width:80px;
	}
	
	/*内容*/
	.label-info-other{
		padding-left:0;
	}
	
	.form-group select,
	.form-group input,
	.count-btn{
		border:2px solid white;
		background-color:#22AB39;
		font-size:15px;
		color:white;
		width:25px;
		height:25px;
		border-radius:0;
	}
	
	.count-btn{
		padding:0;
	}
	
	.form-horizontal .control-label{
		color:white;
	}
	
	#first-img,
	#zoomedImg{
		height:350px;
	}
	
	.img-li{
		height:90px;
		padding:0;
	}
	
	@media screen and (max-height:800px){
		#first-img,
		#zoomedImg{
			height:270px;
		}
		
		.img-li{
			height:50px;
		}
	}
</style>
    
    <script src="__PUBLIC__/Js/lib/jquery-1.11.2.min.js"></script>
	<script src="__PUBLIC__/Js/lib/bootstrap.min.js"></script>
	<script src="__PUBLIC__/Js/lib/bootstrap-datetimepicker.min.js" charset="UTF-8"></script>
	<script type="text/javascript" src="__PUBLIC__/Js/lib/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
  	<script src="__PUBLIC__/Js/Index/common.js"></script>
  	<script type="text/javascript">
  		$(function(){
  			var today = new Date();
  			var year = today.getFullYear();
  			var month = today.getMonth()+1;
  			var day = today.getDate()+1;
  			var todayStr = year + "-" + month + "-" + day;
  			// 设定日期控件
  			$('#datetimepicker').datetimepicker({
  		        language: 'zh-CN',
  		        format: "yyyy-mm-dd",
  	        	autoclose: true,
  	        	todayBtn: false,
  	        	todayHighlight: false,
	  	  		startView: 2,
	  	  		minView: 2,
  	        	pickerPosition:"bottom-right",
  	        	startDate:todayStr
  		    });
  			
  			// 点击预定按钮
  			$("#orderBtn").click(function(){
  				// 检查是否已经登录
  				if($.trim($("#loginUser").val()) === ""){
  					alert("您还没有登录，请先登录!");
  					return false;
  				}
  				
  				var count_adult = $("#count-adult").val();
  				var count_child = $("#count-child").val();
  				if(($.trim(count_adult) == "" || $.trim(count_adult) == 0)
  				   && ($.trim(count_child) == "" || $.trim(count_child) == 0)){
  					alert("请填写出行人数！");
  					return false;
  				}
  				
  				var travelDateStr = $("#travelDate").val();
  				if($.trim(travelDateStr) == ""){
  					alert("请选择出行日期");
  					return false;
  				} 
  				$("#orderForm").attr("action","__URL__/order");
  				$("#orderForm").submit();
  			});
  			
  		});
  		
  		// "+"
  		function add(id_input){
  			var count = $("#" + id_input).val();
			if($.trim(count) == ""){
				count = 0;
			} else {
				count = parseInt(count);
			}
			$("#" + id_input).val(count + 1);
			// 计算总价
			calTotalPrice();
  		}
  		// "-"
  		function minus(id_input){
  			var count = $("#" + id_input).val();
			if($.trim(count) != ""){
				count = parseInt(count);
				if(count - 1 > 0){
  					$("#" + id_input).val(count - 1);
  				} else{
  					$("#" + id_input).val("");
  				}
			}
			// 计算总价
			calTotalPrice();
  		}
  		
  		// 检查是否是数字
  		function isNumber(id){
  			if(isNaN($("#" + id).val()) == true){
  				alert("不是数字");
  				$("#" + id).val("");
  				$("#" + id).focus();
  			}
  		}
  		
  	    // 计算总价
  		function calTotalPrice(){
  			// 成人单价
  			var unit_price = $("#unit_price").val();
  			// 成人总数
  			var count_adult = $("#count-adult").val();
  			if($.trim(count_adult) == ""){
  				count_adult = 0;
  			}
  			// 儿童总数
  			var count_child = $("#count-child").val();
  			if($.trim(count_child) == ""){
  				count_child = 0;
  			}
  			var total_price = (unit_price * count_adult + unit_price / 2 * count_child).toFixed(2);
  			var index = total_price.indexOf('.');
  			if(index > 0){
  				if(total_price.substring(index+1, index+3) == "00"){
  					total_price = total_price.substring(0, index);
  				}
  			}
  			if(total_price == 0){
  				total_price = unit_price;
  			}
  			$("#price").text(total_price);
  		}
  		
  		// 看大图
  		function zoomImg(url, title){
  			$("#zoomedImg").attr("src", url);
  			$("#zoomedImgTitle").text(title);
  		}
  		
  		// 返回上一页
  		function goBack(){
  			history.go(-1);
  		}
  	</script>
  	
  </head>

  <body>
  	<input type="hidden" id="loginUser" value="{$_SESSION['loginUser_Index']}">
  	<div class="myContainer col-xs-12 col-sm-12 col-md-12 col-lg-12" style="min-width:1000px;">
  		<!-- 景点信息 -->
	   <div class="row whole-row" id="first-img" style="">
	   		<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" style="width:50%;padding:0;">
	   			<notempty name="around['first_img_path']">
		   			<img src="__PUBLIC__/Uploads/{$around['first_img_path']}" id="zoomedImg" alt="{$around['name']}" 
		   			style="width:100%;">
		   			<div class="title-alt" style="background-color:#01ADFF;positon:absolue;bottom:0;left:0;right:0;">
	  						<strong id="zoomedImgTitle">{$around.name}</strong>
	  				</div>
  				</notempty>
	   		</div>
	   		
	   		<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" style="padding-right:0;">
	   			<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 img-li" style="">
	   				<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" style="padding:0;width:30%;height:100%;">
	  					<notempty name="around['first_img_path']">
		  					<a href="javascript:zoomImg('__PUBLIC__/Uploads/{$around['first_img_path']}', '{$around['name']}');">
			  					<img src="__PUBLIC__/Uploads/{$around['first_img_path']}" alt="{$around['name']}">
		  				    </a>
	  				    </notempty>
	  				</div>
	  				<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" style="padding:0;width:20%;height:100%;">
	  					<notempty name="around['second_img_path']">
		  					<a href="javascript:zoomImg('__PUBLIC__/Uploads/{$around['second_img_path']}', '{$around['name']}');">
			  					<img src="__PUBLIC__/Uploads/{$around['second_img_path']}" alt="{$around['name']}">
		  				    </a>
	  				    </notempty>
	  				</div>
	  				<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" style="padding:0;width:25%;height:100%;">
	  					<notempty name="around['third_img_path']">
		  					<a href="javascript:zoomImg('__PUBLIC__/Uploads/{$around['third_img_path']}', '{$around['name']}');">
			  					<img src="__PUBLIC__/Uploads/{$around['third_img_path']}" alt="{$around['name']}">
		  				    </a>
	  				    </notempty>
	  				</div>
	  				<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" style="padding:0;width:25%;height:100%;">
	  					<notempty name="around['forth_img_path']">
		  					<a href="javascript:zoomImg('__PUBLIC__/Uploads/{$around['forth_img_path']}', '{$around['name']}');">
			  					<img src="__PUBLIC__/Uploads/{$around['forth_img_path']}" alt="{$around['name']}">
		  				    </a>
	  				    </notempty>
	  				</div>
	   			</div>
	   			
	   			<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 img-li" style="">
	   				<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" style="padding:0;width:30%;height:100%;">
	  					<notempty name="around['fifth_img_path']">
		  					<a href="javascript:zoomImg('__PUBLIC__/Uploads/{$around['fifth_img_path']}', '{$around['name']}');">
			  					<img src="__PUBLIC__/Uploads/{$around['fifth_img_path']}" alt="{$around['name']}">
		  				    </a>
	  				    </notempty>
	  				</div>
	  				<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" style="padding:0;width:20%;height:100%;">
	  					<notempty name="around['sixth_img_path']">
		  					<a href="javascript:zoomImg('__PUBLIC__/Uploads/{$around['sixth_img_path']}', '{$around['name']}');">
			  					<img src="__PUBLIC__/Uploads/{$around['sixth_img_path']}" alt="{$around['name']}">
		  				    </a>
	  				    </notempty>
	  				</div>
	  				<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" style="padding:0;width:50%;height:100%;">
	  					<notempty name="around['seventh_img_path']">
		  					<a href="javascript:zoomImg('__PUBLIC__/Uploads/{$around['seventh_img_path']}', '{$around['name']}');">
			  					<img src="__PUBLIC__/Uploads/{$around['seventh_img_path']}" alt="{$around['name']}">
		  				    </a>
	  				    </notempty>
	  				</div>
	   			</div>
	   			
	   			<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" 
   					style="height:150px;background-color:#22AB39;margin-top:20px;padding-right:0;font-size:18px;color:white;
						padding-top: 10px;line-height: 30px;">
   					   &nbsp;&nbsp;{$around.about}
	   			</div>
	   		</div>
	   	
	   </div>
	   
	  <!-- 预定 -->
	   <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="height:auto;background-color:#22AB39;margin-top:20px;">
	   		<form class="form-horizontal" id="orderForm" method="post" role="form" style="margin-top:5px;">
	   			<input type="hidden" name="id" value="{$around.id}">
	   			<input type="hidden" name="type" value="2">
   				<!-- 预定信息-->
	   			<div class="col-xs-7 col-sm-7 col-md-7 col-lg-7">
	   				<div class="form-group" style="padding-top:5px;padding-bottom:5px;">
				      <div  class="col-xs-3 col-sm-3 col-md-3 col-lg-3 control-label label-title" 
				      style="text-align:left;background-color:#BDE6C4;color:black;font-size:15px;width:45px;height:25px;padding:0;margin-left:15px;">
				      <img src="__PUBLIC__/Image/Index/tuijian_1.png" style="width:100%;height:100%;">
				      </div>
				      <div  class="col-xs-3 col-sm-3 col-md-3 col-lg-3 control-label label-title" 
				      style="text-align:left;background-color:#BDE6C4;color:black;font-size:15px;width:45px;height:25px;padding:0;margin-left:5px;">
				      <img src="__PUBLIC__/Image/Index/rexiao.png" style="width:100%;height:100%;">
				      </div>
				      <div  class="col-xs-3 col-sm-3 col-md-3 col-lg-3 control-label label-title" 
				      style="text-align:left;background-color:#BDE6C4;color:black;font-size:15px;width:45px;height:25px;padding:0;margin-left:5px;">
				      <img src="__PUBLIC__/Image/Index/huobao.png" style="width:100%;height:100%;">
				      </div>
				      <div  class="col-xs-3 col-sm-3 col-md-3 col-lg-3 control-label label-title" 
				      style="text-align:left;background-color:#BDE6C4;color:black;font-size:15px;width:45px;height:25px;padding:0;margin-left:5px;">
				      <img src="__PUBLIC__/Image/Index/zhekou.png" style="width:100%;height:100%;">
				      </div>
				   </div>
	   				<div class="form-group" style="padding-top:5px;padding-bottom:5px;">
				      <label  class="col-xs-3 col-sm-3 col-md-3 col-lg-3 control-label label-title" style="text-align:left;">价格:</label>
				      <input type="hidden" id="unit_price" value="{$around.price}">
				      <span  class="col-xs-1 col-sm-1 col-md-1 col-lg-1 control-label label-info-other" id="price"
				      		style="text-align:center;font-size:35px;margin-top:-5px;width:auto;">{$around.price}</span>
				      <label class="col-xs-1 col-sm-1 col-md-1 col-lg-1 control-label label-title" style="text-align:left;padding-left:0;">元起</label>
				   </div>
				   <div class="form-group" style="padding-top:5px;padding-bottom:5px;">
				      <label  class="col-xs-3 col-sm-3 col-md-3 col-lg-3 control-label label-title" style="text-align:left;width:auto;">出行人数:</label>
				      <span  class="col-xs-2 col-sm-2 col-md-2 col-lg-2 control-label label-title" style="text-align:left;width:80px;">成人</span>
				      <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1" style="padding-top:10px;padding-left:0;padding-right:0;width:auto;">
				         <button type="button" class="form-control count-btn" id="add-adult" onclick="add('count-adult');">+</button>
				      </div>
				      <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 info" style="padding-top:10px;padding-left:0;padding-right:0;width:45px;">
				         <input type="text" class="form-control int" name="count-adult" id="count-adult" style="padding:0;width:100%;
						   border-left:0;border-right:0;text-align:center;"
				          onblur="isNumber('count-adult');"> 
				      </div>
				      <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1" style="padding-top:10px;padding-left:0;padding-right:0;width:auto;">
				         <button type="button" class="form-control count-btn" id="minus-adult" onclick="minus('count-adult');">-</button>
				      </div>
				      <span  class="col-xs-2 col-sm-2 col-md-2 col-lg-2 control-label label-title" style="text-align:left;width:80px;">儿童</span>
				      <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1" style="padding-top:10px;padding-left:0;padding-right:0;width:auto;">
				         <button type="button" class="form-control count-btn" id="add-child" onclick="add('count-child');">+</button>
				      </div>
				      <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 info" style="padding-top:10px;padding-left:0;padding-right:0;width:45px;">
				         <input type="text" class="form-control int" name="count-child" id="count-child" style="padding:0;width:100%;
						   border-left:0;border-right:0;text-align:center;"
				         onblur="isNumber('count-child');"> 
				      </div>
				      <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1" style="padding-top:10px;padding-left:0;padding-right:0;width:auto;">
				         <button type="button" class="form-control count-btn" id="minus-child" onclick="minus('count-child');">-</button>
				      </div>
				   </div>
				   <div class="form-group" style="padding-top:5px;padding-bottom:10px;">
				      <label  class="col-xs-3 col-sm-3 col-md-3 col-lg-3 control-label label-title " style="text-align:left;width:auto;">出行日期:</label>
				      <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 info" style="padding-top:8px;width:220px;">
				      	<div class="input-group date form_date" data-date="" id="datetimepicker" style="width:100%;">
		                    <input class="form-control" id="travelDate" name= "travelDate" size="16" type="text" value="" 
		                    readonly style="background-color:#22AB39;margin-top:2px;">
		                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
							<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
		                </div>
					</div> 
				   </div>
	   			</div>
	   			
	   			 <!-- 预定按钮 -->
	   			<div class="col-xs-5 col-sm-5 col-md-5 col-lg-5" style="text-align:center;">
	   				<button type="button" id="orderBtn" class="btn order-btn" style="border-radius:10px;margin-top:70px;
										background-color:white;line-height:1;color:#22AB39;font-size:40px;
										font-weight:600;font-style:oblique;padding-left:20px;padding-right:20px;">立刻预定</button>
	   			</div>
	   		</form>
	   </div>
	   
	   <!-- 底部Tab -->
	   <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="height:auto;background-color:#22AB39;
						min-height:250px;margin-top:20px;border-left:1px solid white;">
	   		<ul id="myTab" class="nav nav-tabs" style="margin-top:10px;">
			   <li ><a href="#discount" data-toggle="tab">优惠活动 </a></li>
			   <li ><a href="#feature" data-toggle="tab">产品特色</a></li>
			   <li class="active"><a href="#introduction" data-toggle="tab">行程介绍 </a></li>
			   <li ><a href="#cost-explain" data-toggle="tab">费用说明 </a></li>
			   <li ><a href="#order-note" data-toggle="tab">预定须知</a></li>
			   <li ><a href="#comment" data-toggle="tab">游客点评</a></li>
			   <li ><a href="#releated-product" data-toggle="tab">相关产品 </a></li>
			</ul>
			<div id="myTabContent" class="tab-content" style="color:white;font-size:18px;margin-top:10px;">
			   <div class="tab-pane fade " id="discount">
			      <p>{$around.discount}</p>
			   </div>
			   <div class="tab-pane fade" id="feature">
			      <p>{$around.feature}</p>
			   </div>
			   <div class="tab-pane fade in active" id="introduction">
			      <p>{$around.about}</p>
			   </div>
			   <div class="tab-pane fade" id="cost-explain">
			      <p>{$around.cost_explain}</p>
			   </div>
			   <div class="tab-pane fade" id="order-note">
			      <p>{$around.order_note}</p>
			   </div>
			   <div class="tab-pane fade" id="comment">
			      <foreach name="comment_list" item="comment">
	  				<div class="row" style="border:2px solid white;font-size:20px;color:white;margin:5px;margin-top:15px;">
	  					<label class="col-sm-4 col-md-4 col-lg-4 control-label" style="text-align:left;width:auto;padding:8px;">
		  					{$comment.comment_user_name}:
	  					</label>
					    <span  class="col-sm-4 col-md-4 col-lg-4 control-label"
					    		style="text-align:left;width:auto;padding-top:8px;padding-bottom:8px;width:60%;">
					    	{$comment.comment}
				    	</span>
				    	<span style="float:right;padding-top:8px;margin-right:15px;">
					    	{$comment.comment_time}
				    	</span>
	  				</div>
	  			</foreach>
			   </div>
			   <div class="tab-pane fade" id="releated-product">
		   		  <p>{$around.releated_product}</p>
			   </div>
			</div>
	   </div>
	   
	   <div >
	   		<a class="btn " href="javascript:goBack();" style="margin-top:20px;background-color:#22AB39;float:right;
						font-size:30px;color:white;padding-top:0;padding-bottom:0;">返回</a>
	   </div>
	</div>
  </body>
</html>
